<template>
  <div class="unified-alarm-main">
    <div class="main-title">
      <div>告警消息</div>
      <div class="main-title-right">
        <span
          :class="{ 'title-active': activeTitle == 1 }"
          @click="selectType(1)"
          >3天内</span
        >
        <el-divider direction="vertical"></el-divider>
        <span
          :class="{ 'title-active': activeTitle == 2 }"
          @click="selectType(2)"
          >本周</span
        >
        <el-divider direction="vertical"></el-divider>
        <span
          :class="{ 'title-active': activeTitle == 3 }"
          @click="selectType(3)"
          >本月</span
        >
      </div>
    </div>
    <div class="title-class">
      <span @click="handleTitle(true)" :class="{ 'type-active': isShow }"
        >统一告警 &nbsp;|&nbsp;</span
      ><span :class="{ 'type-active': !isShow }" @click="handleTitle(false)"
        >告警分级</span
      >
    </div>
    <template v-if="isShow">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="网" name="1"></el-tab-pane>
        <el-tab-pane label="云" name="2"></el-tab-pane>
        <el-tab-pane label="动环" name="3"></el-tab-pane>
      </el-tabs>
      <div class="alarm-main-content" v-loading="loading">
        <el-timeline :reverse="reverse" v-if="alarmList.length">
          <el-timeline-item
            v-for="(activity, index) in alarmList"
            :key="index"
            placement="top"
            :timestamp="activity.startTime"
            @click.native="goDetail(activity)"
          >
            <div class="alarm-type">{{ activity.monitorSrc | filterType }}</div>
            <div class="alarm-description">{{ activity.description }}</div>
            <div :class="addClass(activity.alarmLevelName)">
              {{ activity.alarmLevelName | activeNameFilter }}
            </div>
          </el-timeline-item>
        </el-timeline>
        <el-empty description="暂无数据" :image-size="100" v-else></el-empty>
      </div>
    </template>
    <template v-else>
      <el-tabs v-model="activeGradeName" @tab-click="handleGradeClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="紧急" name="1"></el-tab-pane>
        <el-tab-pane label="严重" name="2"></el-tab-pane>
        <el-tab-pane label="主要" name="3"></el-tab-pane>
        <el-tab-pane label="次要" name="4"></el-tab-pane>
        <el-tab-pane label="预警" name="5"></el-tab-pane>
      </el-tabs>
      <div class="alarm-main-content" v-loading="loading">
        <el-timeline :reverse="reverse" v-if="alarmLevelList.length">
          <el-timeline-item
            v-for="(activity, index) in alarmLevelList"
            :key="index"
            placement="top"
            :timestamp="activity.startTime"
            @click.native="goDetail(activity)"
          >
            <div class="alarm-type">{{ activity.monitorSrc | filterType }}</div>
            <div class="alarm-description">{{ activity.description }}</div>
            <div :class="addClass(activity.alarmLevelName)">
              {{ activity.alarmLevelName | activeNameFilter }}
            </div>
          </el-timeline-item>
        </el-timeline>
        <el-empty description="暂无数据" :image-size="100" v-else></el-empty>
      </div>
    </template>
    <alarm-detail :showDialog.sync="showDialog" :detail="detail"></alarm-detail>
  </div>
</template>

<script>
import { getAlarmList, getAlarmLevelList } from "@/api/home/alarm.js";
import AlarmDetail from "./alarmDetail";
export default {
  components: {
    AlarmDetail,
  },
  data() {
    return {
      activeName: "0",
      activeGradeName: "0",
      activeTitle: "",
      reverse: false,
      alarmList: [],
      alarmLevelList: [],
      showDialog: false,
      loading: false,
      detail: {},
      isShow: true,
    };
  },
  filters: {
    activeNameFilter(activeName) {
      switch (activeName) {
        case "紧急告警":
          return "紧急";
        case "严重告警":
          return "严重";
        case "主要告警":
          return "主要";
        case "次要告警":
          return "次要";
        case "预警":
          return "预警";
      }
    },
    filterType(type) {
      switch (type) {
        case "1":
          return "网";
        case "2":
          return "云";
        case "3":
          return "动环";
        default:
          return "网";
      }
    },
  },
  methods: {
    addClass(activeName) {
      switch (activeName) {
        case "紧急告警":
          return "type-emergent";
        case "严重告警":
          return "type-serious";
        case "主要告警":
          return "type-important";
        case "次要告警":
          return "type-secondary";
        case "预警":
          return "type-warning";
      }
    },
    handleClick() {
      this.getAlarmList();
    },
    handleGradeClick() {
      this.getAlarmLevelList();
    },
    goDetail(row) {
      this.detail = row;
      this.showDialog = true;
    },
    async getAlarmLevelList() {
      this.loading = true;
      const result = await getAlarmLevelList({
        date: this.activeTitle,
        type: this.activeGradeName,
      });
      this.alarmLevelList = result.data;
      this.loading = false;
    },
    async getAlarmList() {
      this.loading = true;
      const result = await getAlarmList({
        date: this.activeTitle,
        type: this.activeName,
      });
      this.alarmList = result.data;
      this.loading = false;
    },
    selectType(type) {
      this.activeTitle = type;
      if (this.isShow) {
        this.getAlarmList();
      } else {
        this.getAlarmLevelList();
      }
    },
    handleTitle(flag) {
      this.isShow = flag;
      if (flag) {
        this.getAlarmList();
      } else {
        this.getAlarmLevelList();
      }
    },
  },
  mounted() {
    this.getAlarmList();
  },
};
</script>

<style lang="scss" scoped>
.unified-alarm-main {
  height: 100%;
  .alarm-main-content {
    height: calc(100% - 90px);
    overflow: auto;
  }
  .common-type {
    margin-left: auto;
    width: 44px;
    height: 17px;
    text-align: center;
    border-radius: 3px;
    font-size: 12px;
    opacity: 1;
    color: #ffffff;
  }
  .type-emergent {
    background: #c52904;
    @extend .common-type;
  }
  .type-serious {
    background: #ed654a;
    @extend .common-type;
  }
  .type-important {
    background: #fc9a07;
    @extend .common-type;
  }
  .type-secondary {
    background: #d88810;
    @extend .common-type;
  }
  .type-warning {
    background: #4fc1ff;
    @extend .common-type;
  }
}
::v-deep .el-divider {
}
::v-deep .el-timeline {
  margin-left: -30px;
}
.title-active {
  color: #eff2fe;
}
.alarm-description {
  flex: 1;
}
</style>